<html>
<head>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript' src="proj4js/lib/proj4js-combined.js"></script>
<script type='text/javascript' src='http://www.openstreetmap.org/openlayers/OpenStreetMap.js'></script>
<script type='text/javascript' src='http://www.free-map.org.uk/javascript/ezol.js'></script>
<script type='text/javascript'>

		OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
	                defaultHandlerOptions: {
	                    'single': true,
	                    'double': false,
	                    'pixelTolerance': 0,
	                    'stopSingle': false,
	                    'stopDouble': false
	                },

	                initialize: function(options) {
	                    this.handlerOptions = OpenLayers.Util.extend(
	                        {}, this.defaultHandlerOptions
	                    );
	                    OpenLayers.Control.prototype.initialize.apply(
	                        this, arguments
	                    ); 
	                    this.handler = new OpenLayers.Handler.Click(
	                        this, {
	                            'click': this.onClick
	                        }, this.handlerOptions
	                    );
	                }, 
	
	                onClick: function(e) {	  
						var output1 = document.getElementById(key + "Output1");
						var output2 = document.getElementById(key + "Output2");	
                    
						var xy = map.getLonLatFromViewPortPx(e.xy);
								
						var lonlat = xy.transform(map.projection, map.displayProjection);
								
						var Longitude = lonlat.lon;
						var Latitude = lonlat.lat;
		
						output1.value = "";
						output2.value = "";
		
						output1.value = output1.value + Longitude;
						output2.value = output2.value + Latitude;
	                }
	
	            });

			
	var map, controls;
	var key = "single";
	
	function init()
	{
		map = new OpenLayers.Map("mapdiv", {
			controls:[
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.Attribution()],
			numZoomLevels: 14,
			units: 'mi',
			projection: new OpenLayers.Projection("EPSG:900913"),
			displayProjection: new OpenLayers.Projection("EPSG:4326")
		});
		
		map.addLayer(new OpenLayers.Layer.OSM());
		
		//Set start centrepoint and zoom    
		var lonLat = new OpenLayers.LonLat(121.047, 14.390).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
		var zoom=14;
		map.setCenter (lonLat, zoom);  
		
		/*map.events.register("click", map, clickHandler);
		map.events.register("dblclick", map, onClick);*/
		
		var click = new OpenLayers.Control.Click();
	    map.addControl(click);
		click.activate();
		
		var output1 = document.getElementById(key + "Output1");
        output1.value = "";
		var output2 = document.getElementById(key + "Output2"); 
        output2.value = "";
			
	}
	
</script>
</head>
<body onload="init()">
<div id="mapdiv"></div>
	<div id="east">
		<table>
			<tr>
				<!--<td><button id="singleStatus" onclick="toggle('single')"></td>-->
				<td>Longitude:<input type="text" id="singleOutput1" class="output1" value=""></td>
				<td>Latitude:<input type="text" id="singleOutput2" class="output2" value=""></td>
				<td>Points of Interest:<select name="POI">
					<option value="Hospital">Hospital</option>
					<option value="Restaurant">Restaurant</option>
					<option value="Evacuation Center">Evacuation Center</option>
					<option value="Clinic">Clinic</option>
					<option value="Fire">Fire Department</option>
				</td>
				<td><input type="button" value="Submit"></td>	
			</tr>
		</table>
	</div>
</body>
</html>	